<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="digit.js"></script>
		<script type="text/javascript">
			function a(id) {
				return document.getElementById(id)
			}
			window.onload = function() {
				var cnv = a("canvas")
				var cxt = cnv.getContext("2d");

				//				cxt.beginPath();
				//				cxt.arc(20,20,10,0,Math.PI*2,true)
				//				cxt.fill()
				
				var r = 5;
				var x=50;
				var y=100;
				var colors=["#2533ff","#d2c0ff","#da26ff","#999","#9000f1","#f0c101f","#f1a1ff","#b133dd","#5609ff","#bcb0ff"]
				//console.log(n0);

				
				window.setInterval(function() {
					cxt.clearRect(0, 0, cnv.width, cnv.height)
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					var s1 = Math.floor(s % 10);
					var s10 = Math.floor(s / 10);
					var m1 = Math.floor(m % 10);
					var m10 = Math.floor(m / 10);
					var h1 = Math.floor(h % 10);
					var h10 = Math.floor(h / 10);
					digit(s1, 43 * 2 * r+30);
					digit(s10, 36 * 2 * r+20)
					digit(h1, 7 * 2 * r +10);
					digit(h10, 0)
					digit(m1, 25 * 2 * r+20);
					digit(m10, 18 * 2 * r+10)
					addcolon(14 * 2 * r +10)
					addcolon(32 * 2 * r +20)

					
					function addcolon(dis) {
						for(i = 0; i < 10; i++) {
							for(var j = 0; j < 4; j++) {
								if(colon[i][j] == 1) {
									cxt.beginPath();
									cxt.fillStyle = colors[Math.floor(Math.random()*10)]
									cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
									cxt.fill();
									cxt.closePath();
								}
							}
						}
					}

					function digit(time, dis) {
						switch(time) {

							case 0:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n0[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 1:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n1[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 2:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n2[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 3:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n3[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 4:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n4[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 5:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n5[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 6:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n6[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 7:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n7[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 8:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n8[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 9:
								for(var i = 0; i < 10; i++) {
									for(var j = 0; j < 7; j++) {
										if(n9[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)]
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, Math.PI * 2, true)
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
						}
					}

				}, 200)

			}
		</script>
	</head>

	<body>
		<canvas id="canvas" width="650" height="400" style="border:1px dashed gray;"></canvas>
	</body>

</html>